<template>
	<!-- title -->
	<view class="gendanbox">
		<view class="imagefadan">
			<image class="fadan" src="../../static/fd.png"></image>
			<view class="textfadan">发单</view>
		</view>
		<view class="gendandating">
			<view class="textgendan">跟单大厅</view>
			<view class="imagetishi">
				<image class="tishi" src="../../static/ts.png" @click="goToBangzhu"></image>
			</view>
		</view>
		<view class="iconbox">
			<view class="imagesousuo">
				<image class="sousuo" src="../../static/ss.png" @click="goToSousuo"></image>
			</view>
	
			<view class="imagegeren">
				<image class="geren" src="../../static/gr.png" @click="goToZhanji"></image>
			</view>
		</view>
	</view>
	<!-- 遮罩层部分 -->
	<view class="tanchuang">
		<view class="tanchuang_nr">
			<view class="tanchuang_nrbox">
				<image class="tanchuang_nrbox_img" src="../../static/zuqiu.png"></image>
				<view class="tanchuang_nrbox_text">竞彩足球</view>
			</view>
			<view class="tanchuang_nrbox">
				<image class="tanchuang_nrbox_img" src="../../static/lanqiu.png"></image>
				<view class="tanchuang_nrbox_text">竞彩篮球</view>
			</view>
			<view class="tanchuang_nrbox">
				<image class="tanchuang_nrbox_img" src="../../static/beijingdanchang1.png"></image>
				<view class="tanchuang_nrbox_text">北京单场</view>
			</view>
			<view class="tanchuang_nrbox">
				<image class="tanchuang_nrbox_img" src="../../static/pailiesan.png"></image>
				<view class="tanchuang_nrbox_text">排列三</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	/* 以下是遮罩层部分的样式 */
	.tanchuang {
		position: fixed;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9999;
		/* 确保它在最顶层 */
	}

	.tanchuang_nr {
		background-color: white;
		    /* display: flex; */
		    margin-top: 15%;
		    width: 40%;
	}
	.tanchuang_nrbox{
		    display: flex;
		    align-items: center;
		    /* width: 130px; */
		    padding: 2% 10%;
		    /* border-buttom: 1px solid; */
		       border-bottom: 1px solid #f5f5f5;
	}
	.tanchuang_nrbox_img {
		    width: 36px;
		    height: 36px;
		    display: block;
	}

	.tanchuang_nrbox_text {
		
		    color: #303133;
		    font-size: 14px;
	}
	
	/* 以下是title部分样式 */
	/* title1 */
	.gendanbox {
		background-color: #e23234;
		height: 50px;
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: space-around;
		/* 元素平均分布 */
	}
	
	.imagefadan,
	.imagetishi,
	.imagesousuo,
	.imagegeren,
	.iamgetips {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}
	
	.fadan,
	.tishi,
	.sousuo,
	.geren,
	.tips {
		/* 统一设置宽高，如果有不同可以单独设置 */
		width: 16px;
		height: 16px;
	}
	
	.sousuo {
		width: 19px;
		height: 19px;
	}
	
	.geren {
		width: 19px;
		height: 19px;
	}
	
	.gendandating {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}
	
	.textgendan {
		margin-left: 5px;
		/* 跟单大厅与图标之间的间距 */
		margin-right: 5px;
		/* 跟单大厅与图标之间的间距 */
		font-size: 19px;
		color: #fff;
	}
	
	.imagesousuo,
	.imagegeren {
		margin-left: 5px;
		/* 跟单大厅与图标之间的间距 */
		margin-right: 5px;
	}
	
	.iconbox {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}
	
	.textfadan {
		font-size: 14px;
		color: #fff;
		margin-left: 5px;
		/* 发单文字与图标之间的间距 */
	}
	
	/* 提示部分 */
	.tishibox {
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		background-color: #faac25;
		color: #fff;
		font-size: 14px;
	}
	
	.iamgetips {
		margin-right: 5px;
		/* 与文本的间距 */
	}
	
	/* title2 */
	
	.textbox {
		display: flex;
		width: 100%;
		padding: 3%;
		background-color: white;
		margin-bottom: 3%;
		height: 85px;
	}
</style>
